<template>
	<view class="page tn-gradient-bg__grey-light">
		<view class="top-bg tn-gradient-bg__cool-6"></view>
    <view class="body">
      <view class="user-tab tn-shadow-blue">
        <view class="user-info">
          <view class="user-info">
            <!--        头像-->
            <view class="user-avatar">
              <tn-avatar size="100rpx" url="https://winwin-public.oss-cn-hangzhou.aliyuncs.com/IMG_4346_03.jpg" />
            </view>

            <!--        用户姓名-->
            <view class="user-info-container">
              <view class="user-nickname">
                <text>姓名</text>
              </view>
              <view class="desc-info">
                <text>联系方式</text>
              </view>
            </view>
          </view>


          <!--        根据条件显示,如果没有用户信息就显现-->
          <view class="user-func-login">
            <view  class="bt-mg">
              <tn-button >登入/注册</tn-button>
            </view>
            <view class="bt-mg">
              <tn-button  >完善信息</tn-button>
            </view>

          </view>


        </view>

      </view>

      <view class="list-tab">
        <view class="agree_nav">
          <view class="title">消费合约</view>
          <view class="list">
            <view class="item" v-for="item in agree_nav">
              <image mode="scaleToFill" :src="item.image" />
              <text>{{item.name}}</text>
            </view>
          </view>
        </view>

        <view class="server_nav">
          <view class="item" v-for="item in server_nav">
            <view class="left">
              <tn-icon :name="item.icon"/>
              <text>{{item.name}}</text>
            </view>

            <text class="right iconfont icon-youjiantou1"></text>
          </view>

        </view>

        <view class="other_nav">
          <view class="item" v-for="item in other_nav">
            <view class="left">
              <tn-icon :name="item.icon"/>
              <text>{{item.name}}</text>
            </view>

            <text class="right iconfont icon-youjiantou1"></text>
          </view>
        </view>
      </view>
    </view>
	</view>
</template>

<script setup>
let agree_nav= [
  {
    image: 'https://winwin-public.oss-cn-hangzhou.aliyuncs.com/a005.png',
    name: '全部订单',
    uri: '',
  },
  {
    image: '/static/myGrid2.png',
    name: '使用中',
    uri: '',
  },
  {
    image: '/static/myGrid3.png',
    name: '已暂停',
    uri: '',
  },
  {
    image: '/static/myGrid4.png',
    name: '已取消',
    uri: '',
  },
  {
    image: '/static/myGrid5.png',
    name: '已完结',
    uri: '',
  },
]

  let server_nav= [
  {
    icon: 'https://winwin-public.oss-cn-hangzhou.aliyuncs.com/8.jpg',
    name: '我要申诉',
    uri: '',
  },
  {
    icon: 'https://winwin-public.oss-cn-hangzhou.aliyuncs.com/my3.png',
    name: '常见问题',
    uri: '',
  },
  {
    icon: 'https://winwin-public.oss-cn-hangzhou.aliyuncs.com/my10.png',
    name: '服务热线',
    uri: '',
  },
]
let other_nav= [
  {
    icon: 'https://winwin-public.oss-cn-hangzhou.aliyuncs.com/my13.png',
    name: '商家端',
    uri: '',
  },
]

</script>

<style lang="scss" scoped>
@import "./styles/mine.scss";
</style>
